<template>
    <div class="marketInquire">
      <el-row class="one_row">
        <el-form :model="requestParam"
                 label-width="140px">
          <el-col :span="6">
            <el-form-item label="指标编码">
              <el-input v-model="requestParam.index_code"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="品类">
              <el-input v-model="requestParam.breed_name"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="规格">
              <el-input v-model="requestParam.sc_name"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="材质">
              <el-input v-model="requestParam.mq_name"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row  class="two_row">
        <el-form :model="requestParam"
                 label-width="140px">
          <!-- <el-col :span="6"> 
              <el-form-item label="供应商">
              <el-input v-model="requestParam.vendor"
                        placeholder=""></el-input>
           </el-form-item>
          </el-col> -->
          <el-col :span="6" class="time">
              <el-form-item label="同步时间">
                <el-date-picker
                  is-range
                  v-model="requestParam.timeValue"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </el-date-picker>
            </el-form-item>
          </el-col>     
        </el-form>
      </el-row>
      <el-row class="three_row">
        <el-col :span="6">
            <div>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
          </div>
      </el-col>
      </el-row>
      <el-table :highlight-current-row="true"
                border
                :header-cell-style="{ background: '#f5f5f5' }"
                :data="tableData.list"
                height="610px">
        <el-table-column prop="serial_number"
                         label="序号"
                         align="center"
                         min-width="30px"
                         type="index"
                         width="100px"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="index_code"
                         label="指标编码"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="breed_name"
                         label="品类"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="sc_name"
                         label="规格"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mq_name"
                         label="材质"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="area_name"
                         label="地区"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <!-- <el-table-column prop="HTName"
                         label="供应商"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column> -->
        <el-table-column prop="created_at"
                         label="同步时间"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handlePageChange"
                     :current-page="requestParam.page"
                     :page-size="requestParam.page_size"
                     layout="total,sizes,prev, pager, next, jumper"
                     background
                     :total="tableData.total_count"
                     align="center">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { BulkManageApi } from "@/services/ResourceCentre";
  export default {
    components: {
  
    },
    data () {
      return {
        requestParam: {
          index_code:'',
          breed_name:'',
          sc_name:'',
          mq_name:'',
          vendor:'',
          is_page: 1,
          page: 1,
          page_size: 10,
          timeValue:'',
          project_id:'',
          start_date:'',
          end_date:'',
        },
        resetParam: {
          index_code:'',
          breed_name:'',
          sc_name:'',
          mq_name:'',
          vendor:'',
          is_page: 1,
          page: 1,
          page_size: 10,
          timeValue:'',
          project_id:'',
          start_date:'',
          end_date:'',
        },
        tableData: {
          list: [],
          page: 1,
          total_count: 0
        }
      };
    },
    methods: {
      // 查询
      search () {
        this.requestParam.page = 1
        this.getData()
      },
      // 重置
      reset () {
        let resetParam = JSON.parse(JSON.stringify(this.resetParam));
        this.requestParam = Object.assign(this.requestParam, resetParam);
        this.getData()
      },
      handlePageChange (page) {
        this.requestParam.page = page
        this.getData()
      },
      getData () {
        // 从仓库里面获取id
        let choosedProject = this.$store.state.choosedProject || {};
        let projectId = choosedProject.project_id;
        // 判断projectId是否存在
        if(projectId){
          this.requestParam.project_id=projectId
        }else{
          let choosedProject=JSON.parse(localStorage.getItem('choosedProject'));
          let projectId=choosedProject.project_id;
          this.requestParam.project_id=projectId;
        }
        // 判断存放开始结束日期的timeValue是否为空
        if(this.requestParam.timeValue){
          this.requestParam.start_date=this.requestParam.timeValue[0],
          this.requestParam.end_date=this.requestParam.timeValue[1]
        }else{
          this.requestParam.start_date='',
          this.requestParam.end_date=''
        }
        BulkManageApi.getMarketInquire({
          params:this.requestParam
        }).then(res => {
          if (res.code === 0) {
            this.tableData = res.data
            console.log(res);
          }
        })
        
      },
    },
    created () {
  
    },
    mounted () {
    this.getData()
    },
  };
  </script>
  
  <style scoped lang="scss">
   /deep/ .el-range-separator{
      width: 12% !important;
  }
  /deep/  .el-date-editor--datetimerange.el-input__inner{
    width: 258px!important;
  }
  
  .marketInquire{
      width: 100%;
      padding: 20px;
      .three_row{
          width: 100%;
          margin-bottom: 20px;
          .el-col{
              width: 100%;
              display: flex;
              justify-content:flex-end;
              align-items: center;
          }
         
      }
  }
  
  </style>
  